
<template>
	<div class="app-container">
		<el-form ref="vehicleRef" :model="form" :rules="rules" label-position="right" label-width="140px">
			<el-row>
				<el-col :span="11">
					<el-form-item label="车牌" prop="plateNo">
						<el-input v-model="form.plateNo" placeholder="请输入车牌" @blur="autoNumbered" />
					</el-form-item>
				</el-col>
				<el-col :span="11">
					<el-form-item label="部门" prop="deptId">
						<el-tree-select v-model="form.deptId" :data="deptOptions"
							:props="{ value: 'id', label: 'label', children: 'children' }" value-key="id" placeholder="请选择部门"
							check-strictly filterable />
					</el-form-item>
				</el-col>
				<el-col :span="11">
					<el-form-item label="车号/自编号" prop="numbered">
						<el-input v-model="form.numbered" placeholder="请输入车号/自编号" />
					</el-form-item>
				</el-col>
				<el-col :span="11">
					<el-form-item label="联系人" prop="contacts">
						<el-input v-model="form.contacts" placeholder="请输入联系人" />
					</el-form-item>
				</el-col>
				<el-col :span="11">
					<el-form-item label="联系人电话" prop="contactPhone">
						<el-input v-model="form.contactPhone" placeholder="请输入联系人电话" />
					</el-form-item>
				</el-col>
				<el-col :span="11">
					<el-form-item label="车架号" prop="vin">
						<el-input v-model="form.vin" placeholder="请输入车架号" />
					</el-form-item>
				</el-col>
				<el-col :span="11">
					<el-form-item label="车牌颜色" prop="color">
						<el-select v-model="form.color" placeholder="请选择车牌颜色">
							<el-option v-for="dict in basic_vehicle_color" :key="dict.value" :label="dict.label"
								:value="parseInt(dict.value)"></el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="11">
					<el-form-item label="车辆类型" prop="type">
						<el-select filterable v-model="form.type" placeholder="请选择车辆类型">
							<el-option v-for="dict in basic_vehicle_type" :key="dict.value" :label="dict.label"
								:value="parseInt(dict.value)"></el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="11">
					<el-form-item label="安全监控类型" prop="monitorType">
						<el-select filterable v-model="form.monitorType" placeholder="请选择安全监控类型">
							<el-option v-for="dict in basic_vehicle_monitor_type" :key="dict.value" :label="dict.label"
								:value="parseInt(dict.value)"></el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="11">
					<el-form-item label="所属平台类型" prop="platformType">
						<el-select filterable v-model="form.platformType" placeholder="请选择所属平台类型">
							<el-option v-for="dict in basic_vehicle_platform_type" :key="dict.value" :label="dict.label"
								:value="parseInt(dict.value)"></el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="11">
					<el-form-item label="联网联控状态" prop="netState">
						<el-select filterable v-model="form.netState" placeholder="请选择联网联控状态">
							<el-option v-for="dict in sys_enable" :key="dict.value" :label="dict.label"
								:value="parseInt(dict.value)"></el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="11">
					<el-form-item label="营运线路" prop="operationRoute">
						<el-input v-model="form.operationRoute" placeholder="请输入营运线路" />
					</el-form-item>
				</el-col>
				<el-col :span="11">
					<el-form-item label="发动机号" prop="engineNumber">
						<el-input v-model="form.engineNumber" placeholder="请输入发动机号" />
					</el-form-item>
				</el-col>
				<el-col :span="11">
					<el-form-item label="营运证号" prop="operationNumber">
						<el-input v-model="form.operationNumber" placeholder="请输入营运证号" />
					</el-form-item>
				</el-col>
				<el-col :span="11">
					<el-form-item label="车籍地" prop="address">
						<el-input v-model="form.address" placeholder="请输入车籍地" />
					</el-form-item>
				</el-col>
				<el-col :span="11">
					<el-form-item label="车队" prop="fleetName">
						<el-input v-model="form.fleetName" placeholder="请输入车队" />
					</el-form-item>
				</el-col>
				<el-col :span="11">
					<el-form-item label="运输行业类别" prop="transportType">
						<el-select clearable filterable v-model="form.transportType" placeholder="请选择运输行业类别">
							<el-option v-for="dict in sys_industry" :key="dict.value" :label="dict.label"
								:value="dict.value"></el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="11">
					<el-form-item label="状态" prop="status">
						<el-select filterable v-model="form.status" placeholder="请选择状态">
							<el-option v-for="dict in sys_data_status" :key="dict.value" :label="dict.label"
								:value="dict.value"></el-option>
						</el-select>
					</el-form-item>
				</el-col>
			</el-row>
		</el-form>
	</div>
</template>
  
<script setup name="EditVehicle">
import { addVehicle, updateVehicle } from "@/api/basic/vehicle";
import { addRouteVehicle } from "@/api/basic/routeVehicle";
import { deptTreeSelect } from "@/api/system/user";
import { watch } from "vue";
const { proxy } = getCurrentInstance();
const {
	basic_vehicle_color,
	basic_vehicle_type,
	basic_vehicle_monitor_type,
	basic_vehicle_platform_type,
	sys_enable,
	sys_industry,
	sys_data_status
} = proxy.useDict(
	'basic_vehicle_color',
	'basic_vehicle_type',
	'basic_vehicle_monitor_type',
	'basic_vehicle_platform_type',
	'sys_enable',
	'sys_industry',
	'sys_data_status'
);

const props = defineProps({
	// 当前的值
	routeId: [Number, String],
	form: {
		type: Object,
		// 对象或数组的默认值
		// 必须从一个工厂函数返回。
		// 该函数接收组件所接收到的原始 prop 作为参数。
		default(rawProps) {
			return {
				routeId: null,
				id: null,
				plateNo: null,
				numbered: null,
				status: null,
				deptId: null,
				contacts: null,
				contactPhone: null,
				vin: null,
				color: null,
				type: null,
				netState: null,
				operationRoute: null,
				engineNumber: null,
				operationNumber: null,
				address: null,
				monitorType: null,
				platformType: null,
				transportType: null,
				fleetName: null,
				delFlag: null,
				createBy: null,
				createTime: null,
				updateBy: null,
				updateTime: null
			}
		}
	}
});
const buttonLoading = ref(false);
const deptOptions = ref([])

const data = reactive({
	form: {},
	queryParams: {
		pageNum: 1,
		pageSize: 10,
		plateNo: undefined,
		numbered: undefined,
		deptId: undefined,
	},
	rules: {
		plateNo: [
			{ required: true, message: "车牌不能为空", trigger: "blur" }
		],
		numbered: [
			{ required: true, message: "车号/自编号不能为空", trigger: "blur" }
		],
		deptId: [
			{ required: true, message: "部门不能为空", trigger: "change" }
		],
		color: [
			{ required: true, message: "车牌颜色不能为空", trigger: "change" }
		],
		type: [
			{ required: true, message: "车辆类型不能为空", trigger: "change" }
		],
		netState: [
			{ required: true, message: "联网联控状态不能为空", trigger: "change" }
		],
		monitorType: [
			{ required: true, message: "安全监控类型不能为空", trigger: "change" }
		],
		platformType: [
			{ required: true, message: "所属平台类型不能为空", trigger: "change" }
		],
		status: [
			{ required: true, message: "状态不能为空", trigger: "change" }
		],
	}
});

const { queryParams, form, rules } = toRefs(data);


/** 查询部门下拉树结构 */
function getDeptTree() {
	deptTreeSelect().then(response => {
		deptOptions.value = response.data;
	});
};
const emit = defineEmits(['opEnd'])


/** 提交按钮 */
function submitForm() {
	proxy.$refs["vehicleRef"].validate(valid => {
		form.value.routeId = props.routeId
		if (valid) {
			buttonLoading.value = true;
			if (form.value.id != null) {
				updateVehicle(form.value).then(response => {
					proxy.$modal.msgSuccess("修改成功");
					emit('opEnd', { status: 'success' })
				}).finally(() => {
					buttonLoading.value = false;
				});
			} else {
				let obj
				if (props.routeId) { //线路车辆的操作
					obj = addRouteVehicle
				} else { //菜单车辆的操作
					obj = addVehicle
				}
				obj(form.value).then(response => {
					proxy.$modal.msgSuccess("新增成功");
					emit('opEnd', { status: 'success' })
				}).finally(() => {
					buttonLoading.value = false;
				});
			}
		}
	});
}
getDeptTree();


function autoNumbered() {
	form.value.numbered = form.value.plateNo ? form.value.plateNo.substr(1) : '';
}

defineExpose({ submitForm });

watch(() => props.form, (newVal, oldVal) => {
	console.log('watch', newVal)
	form.value = newVal
}, { immediate: true });
</script>
<style>
.el-form-item__content :deep(.el-select){
	width: 100%;
}
</style>
  